<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送文件</title>
    <script src="js/jquery/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/zui/1.10.0/css/zui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/zui/1.10.0/lib/jquery/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/zui/1.10.0/js/zui.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/zui/1.10.0/lib/uploader/zui.uploader.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/zui/1.10.0/lib/uploader/zui.uploader.min.css" rel="stylesheet">
</head>
<style>
    .header{
        width: auto;
        height: 80px;
        background-color: lightskyblue;
    }

    .title{
        color: white;
        float: left;
        margin-left: 20px;
    }

    .header:after .content:after{
        clear: both;
    }



    .folder{
        width:1000px;
        margin: auto;
        border: 1px solid honeydew;
    }

    .folderName{
        margin-top: 10px;
        width: auto;
        height: 150px;
        font-size: 28px;
        background-color: cadetblue;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .folderDescribe,.fileName{
        margin: 10px auto auto;
        width: 900px;
        font-size: 20px;
        text-align: left;
    }

    .folderDescribe:after{
        clear: both;
    }

    .text-area{
        width: 500px;
        /*border: 1px solid gray;*/
        /*text-shadow: gray;*/
        /*border-radius: 3px;*/
        vertical-align: middle;
        margin-left: 100px;
    }

    .text-area:focus{
        /*border: 1px solid #82bbee;*/
        outline: none;
    }

    img{
        cursor: pointer;
    }

    .foot{
        margin: auto;

    }

   .next{
        height: 50px;
        width: 200px;
        font-size: 24px;
        margin: 20px auto;
        background-color: white;
        border: 1px solid green;
        color: cadetblue;
       display: block;
    }

    .uploader-div{
        margin: 10px auto 10px auto;
        width: 90%;
        height: 200px;
    }

    .select-file{
        margin: auto;
        display: block;
    }

    .uploader-main{
        margin-top: 5%;
    }

</style>
<body>
<div class="main">
    <div class="header">
        <h2 class="title">快速创建收件夹</h2>
    </div>
    <div class="folder" th:if="${folderView.openFlag == 1 && folderView.overdue == false}">
        <div class="folderName">
            <span class="defaultName" id="name" readonly="readonly" th:utext="${folderView.folderName}"></span>
        </div>
        <div class="folderDescribe">
            <label for="describe" style="float: left">收件说明：</label>
            <div id="describe" class="text-area" readonly="readonly" th:utext="${folderView.describe}"></div>
        </div>
        <div id="uploaderExample" class="uploader uploader-main">
            <div class="file-list uploader-div" data-drag-placeholder="请拖拽文件到此处"></div>
            <button type="button" class="btn btn-primary uploader-btn-browse select-file"><i class="icon icon-cloud-upload"></i> 选择文件</button>
        </div>
        <div class="fileName">
            <div th:each="s, u:${nameList}">
                <div th:if='${s!=""}'>
                <label th:for="one+${u.index}" th:utext="${s}"></label><input type="text" name="fileName" th:id="one+${u.index}">
                </div>
            </div>
        </div>
        <div class="foot">
            <input type="button" onclick="uploadFile()" value="提交" class="next"></input>
        </div>
    </div>
    <div class="folder" th:if="${folderView.openFlag == 0 || folderView.overdue == true}">
        <h4>该收件已截止或暂停</h4>
    </div>
</div>
</body>
<script>
    $(function () {
        $('#uploaderExample').uploader({
            autoUpload: false,            // 当选择文件后立即自动进行上传操作
            url: '/upload_file_url?folder_key='+getQueryString('folder_key'),  // 文件上传提交地址
            multipart_params:function (file, params) {
                return {filename: file.name, extension: file.ext, fileNameParam:get_file_param()};
            },
            responseHandler:function(res, file){
                result = JSON.parse(res.response)
                if(result['res'] == "suc"){
                    // 提交成功
                    alert("提交成功")
                }else{
                    alert("提交失败")
                }
                location.reload()

            },
        });
    })


    function uploadFile() {
        console.log("uploadFile")
        var a = $('#uploaderExample').data('zui.uploader');
        a.start()
    }

    function get_file_param() {
        var d = {}
        $("input[name='fileName']").each(function (index, value) {
            var idStr = $(this).attr("id").replace("one", "")
            idStr = parseInt(idStr)
            d[idStr] = $(this).val()
        })
        return JSON.stringify(d)
    }

    function getQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURIComponent(r[2]);
        };
        return null;
    }
</script>
</html>